<template>
    <div class="home">
        <header class="tc ">
            <h1 class="title pr pr20 pl20 f35 cfff fn">
               <router-link class="img pa cfff" :to="{
                    name:'allorder',
                    params:{id:id}
                }">
                    <i class="el-icon-arrow-left  f40 "></i>
                </router-link>
                订单支付
            </h1>
        </header>
        <main class="p20">
            <section class="bcfff f20 mb20">
                <ul class=" tc">
                    <li class="mb30">
                        <img  :src="obj.avatarUrl" class="car ">
                    </li>
                    <li class="f30 mb40">
                        支付成功
                    </li>
                    <li class="f50  mb60">
                        <p>{{ money }}</p>
                    </li>
                    <li class="f25 mb70">
                        预约编号:{{ obj.reserveNum}}
                    </li>
                    <li class="mb30 f25">
                        <router-link to="/home" class="cfff btn bc0d65 dbc">返回首页</router-link>
                    </li>
                    <li class="f25">
                        <router-link :to="{
                            name:'orderInfo',
                            params:{
                                storeInfo:this.storeInfo,
                                money:this.money,
                                serviceList:this.serviceList
                            }
                        }" class="cfff btn bcbfbf dbc">订单详情</router-link>
                    </li>
                </ul>
            </section>
        </main>
        <ul class="footer  bcff bs  tc pf w100 jcsb f20">
            <li>
                <a href="#" class="pay-order f25 cfff ">
                    <img class="add" src="../../../assets/img/wash-car-img/add.png"> 添加车辆
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    mounted(){
        this.id  = this.$route.params.id;
        this.money = this.$route.params.money;
        // console.log(this.money);
        this.serviceList = this.$route.params.serviceList;
        // console.log(this.serviceList);
        this.storeInfo = this.$route.params.storeInfo;
        // console.log(this.storeInfo);
    },
    data(){
        return{
            id:"",
            storeInfo:"",
            money:'',
            serviceList:[],
            obj:{
                avatarUrl:require('../../../assets/img/wash-car-img/right-round.png'),
                price:39.90,
                reserveNum:"324252536363634"
            },
        }
    }
}
</script>
<style scoped>
.bcbfbf{background-color: #bfbfbf;}
.bc0d65{background-color: #0d65e8; }
.mb70{margin-bottom: 70rem;}
.mb60{margin-bottom: 60rem;}
.mb35{margin-bottom: 35rem;}
.asc{align-self:center;}
.line{height: 1rem;background-color: #f7f7f7;}
.line-dash{border: dashed 2rem;}
.home{background-color: #f7f7f7;}
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  .img{width: auto;left: 20rem;top: 0;}

main {margin-top: -310rem;}
/* 手机端必须加上这一句--体验感 */
main{margin-bottom: 120rem;}
main section{padding: 100rem 30rem;border-radius: 20rem;box-sizing: border-box;} 
main section ul li img.car {width: 130rem;height: 130rem;border-radius: 50%;}
main section ul li a.btn{padding: 20rem 0;display: block;width: 520rem;border-radius: 40rem;}

</style>